<template>
    <div class="container">
        <!-- 呼叫历史 -->
        <!-- 呼叫历史-头部表单搜索 -->
        <div class="callHistoryMore">
            <el-form
                :inline="true"
                :model="formData"
                class="demo-form-inline"
                label-width="100px"
                size="small"
            >
                <!--<el-form-item label-position="left" label="渠道：">-->
                <!--<el-select v-model="formData.custChannel" placeholder="请选择" style="width: 200px;" clearable>-->
                <!--<el-option-->
                <!--v-for="item in custChannelselectList"-->
                <!--:key="item"-->
                <!--:label="item"-->
                <!--:value="item">-->

                <!--</el-option>-->
                <!--</el-select>-->
                <!--</el-form-item>-->
                <el-form-item label-position="left" label="客户名称：">
                    <el-input v-model="formData.custName" size="small" placeholder="请输入内容"></el-input>
                </el-form-item>
                <el-form-item label-position="left" label="来电号码：">
                    <el-input v-model="formData.fromPhone" placeholder="请输入内容"></el-input>
                </el-form-item>
                <el-form-item label-position="left" label="被叫号码：">
                    <el-input v-model="formData.beCalled" placeholder="请输入内容"></el-input>
                </el-form-item>
                <el-form-item label-position="left" label="开始时间:" prop="BIRTHDAY">
                    <el-date-picker
                        style="width: 200px;"
                        v-model="formData.startTime"
                        type="date"
                        placeholder="请选择开始日期"
                        format="yyyy-MM-dd"
                        value-format="yyyyMMdd"
                        :picker-options="startOptions"
                    ></el-date-picker>
                </el-form-item>
                <el-form-item label-position="left" label="结束时间:" prop="BIRTHDAY">
                    <el-date-picker
                        style="width: 200px;"
                        v-model="formData.releaseTime"
                        type="date"
                        placeholder="请选择结束日期"
                        format="yyyy-MM-dd"
                        value-format="yyyyMMdd"
                        :picker-options="endtOptions"
                    ></el-date-picker>
                </el-form-item>
                <el-form-item label-position="left" label="坐席Id：">
                    <el-input v-model="formData.agentId" placeholder="请输入内容"></el-input>
                </el-form-item>
                <el-form-item label-position="left" label="通话方向：">
                    <el-select
                        v-model="formData.direct"
                        placeholder
                        style="width: 200px;"
                        clearable
                    >
                        <el-option
                            v-for="item in directselectList"
                            :key="item"
                            :label="item"
                            :value="item"
                        ></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label-position="left" label="是否接通：">
                    <el-select
                        v-model="formData.isConnected"
                        placeholder="请选择"
                        style="width: 200px;"
                        clearable
                    >
                        <el-option
                            v-for="item in isConnectedLsit"
                            :key="item.id"
                            :label="item.title"
                            :value="item.id"
                        ></el-option>
                    </el-select>
                </el-form-item>
            </el-form>
        </div>
        <!-- 呼叫历史--主体列表展示 -->
        <div class="callHistoryMain">
            <form style="margin-bottom: 12px;">
                <el-button
                    type="primary"
                    size="small"
                    icon="el-icon-search"
                    @click="hanlesearch"
                    :loading="searchLoading"
                    class="searchBtn"
                >查 询</el-button>
                <el-button
                    type="primary"
                    size="small"
                    icon="el-icon-refresh-right"
                    @click="handleReset"
                    :loading="resetLoading"
                    class="resetBtn"
                >重 置</el-button>
            </form>
            <el-table :data="tableData" width="100%" stripe border class="heard-bg">
                <!-- <el-table-column label="渠道" prop="custChannel"></el-table-column> -->
                <el-table-column label="通话方向" prop="direct">
                    <template slot-scope="scope">
                        <span>{{ scope.row.direct ==='1' ? '呼入' : '呼出'}}</span>
                    </template>
                </el-table-column>
                <el-table-column label="会话时间" prop="startTime"></el-table-column>
                <el-table-column label="客户名称" prop="custName"></el-table-column>
                <el-table-column label="被叫号码" prop="beCalled"></el-table-column>
                <el-table-column label="通话时长" prop="callLongSFM"></el-table-column>
                <el-table-column label="结束时间" prop="releaseTime"></el-table-column>
                <el-table-column label="坐席Id" prop="agentId"></el-table-column>
                <el-table-column label="被叫电话" prop="fromPhone"></el-table-column>
                <el-table-column label="是否接通" prop="isconnected">
                    <template slot-scope="scope">
                        <span>{{scope.row.isconnected === '1' ? "接通" : "未接通"}}</span>
                    </template>
                </el-table-column>
                <el-table-column label="是否转接" prop="transterFlag"></el-table-column>
            </el-table>
            <!-- 分页 -->
            <div class="pagination">
                <Pagination
                    :hanleChangeCurrentPage="hanleChangeCurrentPage"
                    :handleChangeSize="handleChangeSize"
                    :currentPage="currentPage"
                    :pageSize="pageSize"
                    :total="total"
                />
            </div>
        </div>
    </div>
</template>

<script>
import { mapState } from 'vuex';
import moment from 'moment';
import Pagination from '@/components/Pagination/Pagination.vue';

export default {
    name: 'callHistoryMore',
    components: {
        Pagination,
    },
    data() {
        return {
            formData: {
                // 渠道
                custChannel: '',
                // 客户名
                custName: '',
                // 来电号码
                fromPhone: '',
                //  被叫号码
                beCalled: '',
                // 开始时间
                startTime: '',
                // 结束时间
                releaseTime: '',
                // 坐席Id
                agentId: '',
                // 通话方向
                direct: '',
                // 是否接通
                isConnected: '',
            },
            // 是否接通下拉
            isConnectedLsit: [
                {
                    title: '接通',
                    id: 1,
                },
                {
                    title: '未接通',
                    id: 0,
                },
            ],
            Show: false,
            // 搜索loading
            searchLoading: false,
            // 重置loading
            resetLoading: false,
            // 当前页码
            currentPage: 0,
            // 页码大小
            pageSize: 10,
            // 总数
            total: 0,
            // 表格内容
            tableData: [],
            // 通话方式下拉数据
            directselectList: [],
            // 渠道下拉数据
            custChannelselectList: [],
            startOptions: {
                // 开始日期选择 限制
                disabledDate: (time) => {
                    if (this.formData.releaseTime) {
                        return (time.getTime() > new Date(moment(this.formData.releaseTime).format('YYYY-MM-DD HH:mm:ss')).getTime());
                    }
                },
            },
            endtOptions: {
                // 结束日期选择限制
                disabledDate: (time) => {
                    if (this.formData.startTime) {
                        return (time.getTime() < new Date(moment(this.formData.startTime).format('YYYY-MM-DD HH:mm:ss')).getTime()
                        );
                    }
                },
            },
        };
    },
    mounted() {
        this.getInitData(this.formData);
    },
    computed: mapState({
        cardInfo_3004: state => state.common.cardInfo_3004,
    }),
    methods: {
        // 获取呼叫历史表格数据
        getInitData(form) {
            let params = {
                pageNum: this.currentPage,
                pageSize: this.pageSize,
                custName: this.cardInfo_3004.NAME,
                custNo: '',
            };
            if (!params.custName && !params.custNo) {
                return;
            }
            params = Object.assign({}, params, form);
            this.$post.latestAnnouncenment.searchByCall(params)
                .then((res) => {
                    console.log(res);
                    if (res.data.success) {
                        this.tableData = res.data.content.callList;
                        this.total = res.data.content.callCount;
                    }
                });
        },


        // 点击搜索
        hanlesearch() {
            this.currentPage = 1;
            this.pageSize = 10;
            this.getInitData(this.formData);
        },
        // 点击重置
        handleReset() {
            this.formData = {
                custChannel: '',
                custName: '',
                fromPhone: '',
                beCalled: '',
                //  startTime:'',
                //  releaseTime:'',
                agentId: '',
                direct: '',
                isConnected: '',
            };
            this.currentPage = 1;
            this.pageSize = 10;
            this.getInitData(this.formData);
        },

        // 页码切换方法
        hanleChangeCurrentPage(val) {
            this.currentPage = val;
            this.getInitData();
        },
        // 切换分页大小方法
        handleChangeSize(val) {
            this.pageSize = val;
            this.getInitData();
        },
    },
};
</script>

<style  lang="scss" >
.container {
    width: 98%;
    height: 100%;
    .callHistoryMore {
        // height: 68px;
        background: #fff;
        border-radius: 5px;
        text-align: left;
        font-size: 14px;
        line-height: 68px;
        padding: 0 12px;
        .el-form--inline .el-form-item__content {
            vertical-align: middle;
        }
    }
    .callHistoryMain {
        width: 100%;
        background: #fff;
        margin: 10px 0 15px;
        border-radius: 5px;
        padding: 12px;
        box-sizing: border-box;
        text-align: left;
        .tableTitle {
            width: 100%;
            height: 48px;
            border: 1px solid #eee;
            border-bottom: none;
            line-height: 48px;
            margin-top: 20px;
            color: #666;
        }
        .pagination {
            margin-top: 20px;
            text-align: right;
        }
    }
}
</style>
